<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: Radio Buttons (YUI Library)</title>

        <!-- Reset and Fonts -->
        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
            

        <!-- Logger CSS -->

        <link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">

         
        <!-- CSS for Button -->
        <link rel="stylesheet" type="text/css" href="../../build/button/assets/button.css">
 
        <!-- Page-specific styles -->
        <style type="text/css">

            body { margin:.5em; }

            h1 { font-weight:bold; }

            fieldset, 
            fieldset div {

                border:2px groove #ccc;
                margin:.5em;
                padding:.5em;

            }

            div#logs {

                margin-top:1em;
            
            }

        </style>

        
        <!-- Dependency source files -->
        <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="../../build/element/element-beta.js"></script>
            
        <!-- Logger source file -->

        <script type="text/javascript" src="../../build/logger/logger.js"></script>

        
        <!-- Button source file -->
        <script type="text/javascript" src="../../build/button/button-beta.js"></script>

        <!-- Page-specific JavaScript -->
        <script type="text/javascript">

            YAHOO.example.init = function () {

                // "checkedButtonChange" event handler for each ButtonGroup instance

                function onCheckedButtonChange(p_oEvent) {
    
                    if(p_oEvent.prevValue) {
    
                        YAHOO.log(p_oEvent.prevValue.get("name"), "info", "example4");
                    
                    }
                    
                    if(p_oEvent.newValue) {
    
                        YAHOO.log(p_oEvent.newValue.get("name"), "info", "example4");
    
                    }
                
                }


                // "contentready" event handler for the "radiobuttonsfrommarkup" <fieldset>    
    
                function onRadioButtonMarkupReady() {
    
                    var oButtonGroup1 = new YAHOO.widget.ButtonGroup("buttongroup1");
                    oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange);
    
                    var oButtonGroup2 = new YAHOO.widget.ButtonGroup("buttongroup2");
                    oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange);
    
                }
    
                YAHOO.util.Event.onContentReady("radiobuttonsfrommarkup", onRadioButtonMarkupReady);
    
    
                // Create a ButtonGroup without using existing markup

                var oButtonGroup3 = new YAHOO.widget.ButtonGroup({ id: "buttongroup3", name: "radiofield3", container:"radiobuttonsfromjavascript" });
    
                oButtonGroup3.addButtons([
    
                    { label:"Radio 9", value:"Radio 9", checked:true },
                    { label:"Radio 10", value:"Radio 10" }, 
                    { label:"Radio 11", value:"Radio 11" }, 
                    { label:"Radio 12", value:"Radio 12" }
    
                ]);
                
                oButtonGroup3.on("checkedButtonChange", onCheckedButtonChange);
    
                // "available" event handler for the "logs" <div>
    
                function onLogsAvailable() {
    
                    var oLogReader = new YAHOO.widget.LogReader("logs");
                    
                }
    
                YAHOO.util.Event.onAvailable("logs", onLogsAvailable);
            
            } ();

        </script>

    </head>
    <body>

        <h1>Example: Radio Buttons (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>

        <form id="example" name="example" method="post" action="example04.html">

            <fieldset id="radiobuttons">
                <legend>Radio Buttons</legend>

                <fieldset id="radiobuttonsfrommarkup">
                    <legend>From Markup</legend>

                    <div id="buttongroup1">
                        <input id="radio1" type="radio" name="radiofield1" value="Radio 1" checked>
                        <input id="radio2" type="radio" name="radiofield1" value="Radio 2">
                        <input id="radio3" type="radio" name="radiofield1" value="Radio 3">
                        <input id="radio4" type="radio" name="radiofield1" value="Radio 4">
                    </div>

                    <div id="buttongroup2">
                        <span id="radio5" class="yuibutton checked"><span class="first-child"><button type="button" name="radiofield2" value="Radio 5">Radio 5</button></span></span>
                        <span id="radio6" class="yuibutton"><span class="first-child"><button type="button" name="radiofield2" value="Radio 6">Radio 6</button></span></span>
                        <span id="radio7" class="yuibutton"><span class="first-child"><button type="button" name="radiofield2" value="Radio 7">Radio 7</button></span></span>
                        <span id="radio8" class="yuibutton"><span class="first-child"><button type="button" name="radiofield2" value="Radio 8">Radio 8</button></span></span>
                    </div>

                </fieldset>

                <fieldset id="radiobuttonsfromjavascript">
                    <legend>From JavaScript</legend>
                </fieldset>

            </fieldset>

            <div>
                <input type="reset" name="resetbutton" value="Reset Form">
                <input type="submit" name="submitbutton" value="Submit Form">
            </div>

        </form>
        
        <div id="logs"></div>

    </body>
</html>